<!--<!DOCTYPE html>-->
<!--<html lang="en" xmlns:th="http://www.thymeleaf.org">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>视频显示</title>-->
<!--</head>-->
<!--<body>-->
<!--<a th:href="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath() + '/video/'}">点我啊！</a>-->
<!--    <table>-->
<!--        <tr th:each="video:${videos}">-->
<!--            <td th:text="${video.id}"></td>-->
<!--            <td th:text="${video.video_title}"></td>-->
<!--            <td>-->
<!--                <video id="video" poster='' th:src="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath() + '/video/'}+${video.video_file_path}" preload="auto" controls="controls" autoplay="autoplay" width="630" height="340"></video>-->
<!--            </td>-->
<!--            <td th:text="${video.video_time}"></td>-->
<!--            <td th:text="${video.video_author}"></td>-->
<!--            <td th:text="${video.number_of_hits}"></td>-->
<!--            <td th:text="${video.release_time}"></td>-->
<!--            <td th:text="${video.is_audit}"></td>-->
<!--        </tr>-->
<!--    </table>-->
<!--</body>-->
<!--</html>-->
<!--${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath() + '/video/'}+${video.video_file_path}-->

<!--<!DOCTYPE html>-->
<!--<html lang="en" xmlns:th="http://www.thymeleaf.org">-->
<!--<head>-->
<!--    <meta charset="utf-8">-->
<!--    <title>菜鸟教程(runoob.com)</title>-->
<!--    <link th:href="@{css/video-js.css}" rel="stylesheet">-->
<!--    <script th:src="@{js/video.min.js}"></script>-->
<!--    <script th:src="@{js/flv.min.js}"></script>-->
<!--    <script th:src="@{js/videojs-flvjs.min.js}"></script>-->
<!--</head>-->
<!--<body>-->

<!--    <div th:each="video:${videos}">-->
<!--        <input class="inp" type="hidden" th:value="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath() + '/video/'}+${video.video_file_path}">-->
<!--        <video-->
<!--                id="videoElement"-->
<!--                class="video-component"-->
<!--                ref="videoElement"-->
<!--                controls-->
<!--                autoplay-->
<!--        >Your browser is too old which doesn't support HTML5 video.</video>-->
<!--    </div>-->

<!--</body>-->
<!--</html>-->
<!--<script>-->
<!--    var videoElements = document.getElementsByClassName("video-component");-->
<!--    var texts = document.getElementsByClassName("inp");-->
<!--    for (var i=0;i<videoElements.length;i++){-->
<!--        console.log(texts[i].getAttribute("value"));-->
<!--        console.log(texts[i].getAttribute("value").split(".")[1]);-->
<!--        var flvPlayer = undefined;-->
<!--        if(texts[i].getAttribute("value").split(".")[1] == "flv"){  // 若是flv格式-->
<!--            if (flvjs.isSupported()) {-->
<!--                flvPlayer = flvjs.createPlayer({-->
<!--                    type: 'flv',-->
<!--                    url: texts[i].getAttribute("value")-->
<!--                });-->
<!--                flvPlayer.attachMediaElement(videoElements[i]);-->
<!--                flvPlayer.load();-->
<!--            }-->
<!--        }else if(texts[i].getAttribute("value").split(".")[1] == "mp4"){    // 若是mp4格式-->
<!--            if (flvjs.isSupported()) {-->
<!--                flvPlayer = flvjs.createPlayer({-->
<!--                    type: 'mp4',-->
<!--                    url: texts[i].getAttribute("value")-->
<!--                });-->
<!--                flvPlayer.attachMediaElement(videoElements[i]);-->
<!--                flvPlayer.load();-->
<!--            }-->
<!--        }-->


<!--        // console.log(videoElements);-->
<!--        // var videoElement = document.getElementById('videoElement');-->
<!--        // var flvPlayer = flvjs.createPlayer({-->
<!--        //     type: 'flv',-->
<!--        //     url: 'http://localhost:8080/video/75cbe9ad-4a9c-4844-8ce2-9382f73edab9.flv'-->
<!--        // });-->
<!--        // flvPlayer.attachMediaElement(videoElement);-->
<!--        // flvPlayer.load();-->
<!--        // flvPlayer.play();-->
<!--    }-->
<!--</script>-->


<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>[[${video.video_title}]]</title>
    <link th:href="@{css/video-js.css}" rel="stylesheet">
    <link th:href="@{css/bootstrap.min.css}" rel="stylesheet">
    <script th:src="@{js/video.min.js}"></script>
    <script th:src="@{js/flv.min.js}"></script>
    <script th:src="@{js/videojs-flvjs.min.js}"></script>
    <style type="text/css">
        .videolist { position:relative; float:left; width:1200px; height:600px; margin-right:150px; margin-top:15px; margin-bottom:30px; }
        .videolist:hover{ cursor: pointer; }
        .videoed { display:none; width:50px; height:50px; position: absolute; left:45%; top:45%; z-index:99; border-radius:100%; }

        .vclose {width: 25px; height: 25px; position:absolute;right:1%; top:1%; border-radius:100%; cursor: pointer; }
        .vtit{
            height: 35px;
            font-family: "微软雅黑";
            font-size: 18px;
            font-weight: bold;
            line-height: 35px;
        }
        .vtime{
            height: 35px;
            font-family: "微软雅黑";
            font-size: 14px;
            font-weight: bold;
            line-height: 35px;

            overflow:hidden;
            word-break:keep-all;
            white-space:nowrap;
            text-overflow:ellipsis;
        }
        .vtime>.date{
            float: left;
        }
        .vtime>.hits,.vtime>.time,.vtime>.author{
            float: left;
            margin-left: 240px;
        }
        .video-js .vjs-big-play-button{
            font-size: 5em;
            line-height: 3.65em;
            height: 4em;
            width: 4em;
            -webkit-border-radius: 2.5em;
            -moz-border-radius: 2.5em;
            border-radius: 2.5em;
            background-color: #73859f;
            background-color: rgba(115,133,159,.5);
            border-width: 0.15em;
            margin-top: -2.5em;
            margin-left: -2.5em;
        }
        /* 中间的播放箭头 */
        .vjs-big-play-button .vjs-icon-placeholder {
            font-size: 1.63em;
        }
        /* 加载圆圈 */
        .vjs-loading-spinner {
            font-size: 2.5em;
            width: 2em;
            height: 2em;
            border-radius: 1em;
            margin-top: -2em;
            margin-left: -2em;
        }
        .vjs-paused .vjs-big-play-button,
        .vjs-paused.vjs-has-started .vjs-big-play-button {
            display: block;
        }
        .video-js .vjs-time-control{display:block;}
        .video-js .vjs-remaining-time{display: none;}
    </style>
</head>
<body>
<input id="inp" type="hidden" th:value="${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #request.getServerPort()  + #request.getContextPath() + '/video/'}+${video.video_file_path}">
<div class="video">
    <div class="container">
        <div class="videolist">
            <div class="vtit" th:text="${video.video_title}"></div>
            <video id="videojs-flvjs-player" class="video-js vjs-default-skin vjs-big-play-centered"  width="1200" height="600"> </video>
            <div class="vtime">
                <div class="date">发布日期：[[${video.release_time}]]</div>
                <div class="hits">点击数：[[${video.number_of_hits}]]</div>
                <div class="time">时长：[[${video.video_time}]]</div>
                <div class="author">作者：[[${video.video_author}]]</div>
            </div>
            <!--            <img src="play.jpg" class="videoed"/>-->
        </div>
    </div>
</div>

</body>
</html>
<script>

    var text = document.getElementById("inp");
    var element = document.getElementById("videojs-flvjs-player");
    var player;

    var flvUrl = text.getAttribute("value");
    // console.log(flvUrl);
    player = videojs(element, {
        techOrder: ['html5', 'flvjs'],
        flvjs: {
            mediaDataSource: {
                isLive: true,
                cors: true,
                withCredentials: false,
            },
        },
        sources: [{
            src: flvUrl,
            type: 'video/mp4'
        }],
        controls: true,
        preload: "none"
    }, function onPlayerReady() {
        console.log('player ready1')

        player.on('error', (err) => {
            console.log('first source load fail')

            var suffix = flvUrl.split(".")[1];
            console.log(suffix);

            if(suffix == "flv"){
                player.src({
                    src: flvUrl,
                    type: 'video/x-flv'
                });
            }else if(suffix == 'rtmp'){
                player.src({
                    src: flvUrl,
                    type: 'rtmp/flv'
                })
            }

            player.ready(function () {
                console.log('player ready2')
                player.load();
                player.play();
            });
        })
    });
    // uploader.on("fileQueued", function(file){
    //
    //     // console.log(file.id+"-"+file.name);
    //     // console.log(file.duration);
    //     // console.log(file);
    //     var suffix = file.name.split(".")[1];
    //     if(last_file_id != null) {
    //         uploader.removeFile(last_file_id);
    //         $("#" + last_file_id).remove();
    //     }
    //     $("#theList").append('<li id="'+file.id+'" class="video_info">' +
    //         '<img /><span class="file_name">'+file.name+'</span><span class="itemDel">删除</span><span class="itemClear">清除</span><span class="itemUpload">上传</span><span class="itemStop">暂停</span>' +
    //         '<span class="default_box" style="display: none"><span class="show_box"></span></span><div class="percentage">等待上传</div>' +
    //         '</li>');
    //
    //     last_file_id = file.id;
    //
    // });
    //
    // $("#theList").on("click", ".itemUpload", function(){
    //     uploader.upload();
    //     // console.log("上传");
    //     //"上传"-->"暂停"
    //     $(this).hide();
    //     $(".itemStop").show();
    // });
    //
    // $("#theList").on("click", ".itemStop", function(){
    //     uploader.stop(true);
    //     // console.log("暂停");
    //     //"暂停"-->"上传"
    //     $(this).hide();
    //     $(".itemUpload").show();
    // });
    //
    // //todo 如果要删除的文件正在上传（包括暂停），则需要发送给后端一个请求用来清除服务器端的缓存文件
    // $("#theList").on("click", ".itemDel", function(){
    //     // console.log("删除："+$(this).parent().attr("id"));
    //     uploader.stop(true);    // 暂定上传操作
    //     setTimeout(function (){
    //         $.ajax({    // 发送请求到后台，然后删除分片和temp文件
    //             type: 'POST',
    //             url: clearChunksUrl,
    //             data: {
    //                 name: uniqueFileName
    //                 , chunks: -1
    //                 , ext: suffix
    //                 , md5: md5Mark
    //             }
    //         })
    //         uploader.removeFile($(this).parent().attr("id"));	//从上传文件列表中删除
    //     },100);
    //
    //
    //     $(this).parent().remove();	//从上传列表dom中删除
    // });
    //
    // $("#theList").on("click",".itemClear",function (){
    //     uploader.removeFile($(this).parent().attr("id"));	//从上传文件列表中删除
    //     $(this).parent().remove();	//从上传列表dom中删除
    // })
    //
    // uploader.on("uploadProgress", function(file, percentage){
    //     var text = $("#" + file.id + " .percentage").text();
    //     if(text != '正在检索...'){
    //         const now_percentage = Math.round(percentage*10000)/100;
    //         $(".default_box>.show_box").css({"width":now_percentage + "%"});
    //         $("#" + file.id + " .percentage").text(now_percentage + "%");
    //     }
    //     if(percentage >= 1){
    //         $(".itemDel").hide();
    //         $(".itemStop").hide();
    //         $(".itemUpload").hide();
    //         $(".default_box").hide();
    //         $("#" + file.id + " .percentage").text("正在处理");
    //         is_video = true;
    //     }
    // });
    //
    // function UploadComlate(file){
    //     // console.log(file);
    //     // console.log("file_id："+$("#" + file.id).attr("id"));
    //     $("#" + file.id + " .percentage").text("上传完毕");
    //     $(".itemClear").show();
    //
    //     uploader.removeFile($("#" + file.id).attr("id"));
    // }
</script>

